<template>
  <div class="my-5 flex flex-col items-center justify-center space-y-3">
    <view class="flex items-center">
      使用「
      <n-icon :size="20" color="green">
        <icon icon="ri:wechat-fill"></icon>
      </n-icon>
      微信
      」扫描二维码登录
    </view>
    <n-button @click="handleLoginReq" text>
      <QrCodeImage :value="loginUrl" :size="250"></QrCodeImage>
    </n-button>
  </div>
</template>

<script setup lang="ts">


import {Icon} from "@iconify/vue";
import QrCodeImage from "@/components/image/QrCodeImage.vue";
import {storeToRefs} from "pinia";
import {useWebSocketStore} from "@/store";
import {onMounted} from "vue";
import {debounce} from "@/utils";

const websocketStore = useWebSocketStore()
const {loginUrl} = storeToRefs(websocketStore)

onMounted(() => {
  websocketStore.loginReq()
})
const handleLoginReq = debounce(() => {
  websocketStore.loginReq()
}, 400)
</script>

<style scoped>

</style>